<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分秒计时器</title>
<style type="text/css">
*{margin:0;padding:0}body{background:#2c2e2f;font-family:Helvetica}.wrapper{position:absolute;top:50%;left:50%;margin:0 auto;transform:translate(-50%,-50%)}.show{background-color:#2c2e2f;color:#fff;text-align:center;letter-spacing:20px;font-weight:100;font-size:14em}.wrapper .controller{margin:150px auto 0;text-align:center;}.wrapper .controller button{margin:0 25px;width:120px;height:60px;outline:0;border:none;border-radius:5px;background-color:#444;color:#fff;font-size:20px;font-family:SimHei,STHeiti,sans-serif}
</style>
<script src="https://cdnjs.loli.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
  <div class="show">
    <div class="h-m-s"></div>
  </div>
  <div class="controller">
    <button class="start">开始计时</button>
    <button class="reset">重置归零</button>
  </div>
</div>

<script type="text/javascript">
  $(function(){
    var $show = $(".show .h-m-s");
    $show.text("00:00");
    var seconds = 0;
    var minutes = 0;
    //var hours = 0;
    var currentHms = "";
    var flag = 0;
    var change = 0;

    $(".controller .start").click(function() {
      if(change === 0){
        flag = setInterval(start,1000);
        $(this).empty().text('点击停止');
        change = 1;
      }else{
        clearInterval(flag); 
        $(this).empty().text('开始计时');  
        change = 0;
      }
    });

    $(".controller .reset").click(function() {
      seconds = 0;
      minutes = 0;
      //hours = 0;
      $show.empty();
      $show.text("00:00");
    });

    function start(){
      seconds++;
      if (seconds>60) {
        seconds = 0;
        minutes++;
      }
      if (minutes>60) {
        minutes=0;
        //hours++;
      }
      seconds = toDouble(seconds);
      minutes = toDouble(minutes);
      //hours = toDouble(hours);
      //currentHms = hours+':'+minutes+':'+seconds;
      currentHms = minutes+':'+seconds;
      $show.empty();
      $show.text(currentHms);
    }
      
    function toDouble(num){
      var str = num.toString();
      if(num<10)
        str = '0' + num;
      str = str.substr(-2,2);
      return str;
    }
  });
</script>

</body>
</html>